<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="description" content="Responsive Admin Template" />
    <meta name="author" content="SmartUniversity" />
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
	<!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
	<!--bootstrap -->
	<link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <!-- Material Design Lite CSS -->
	<link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
	<link rel="stylesheet" th:href="@{/assets/css/material_style.css}">
	<!-- data tables -->
    <link th:href="@{/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
	<!-- animation -->
	<link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
	<!-- Template Styles -->
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css" />
	<link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css" />
	<!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" />
</head>
<!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
    <div class="page-wrapper">
        <!-- start header -->
		<div th:replace="~{commons::headnavbar}"></div>
        <!-- end header -->
        <!-- start page container -->
        <div class="page-container">
 			<!-- start sidebar menu -->
			<div th:replace="~{commons::sidebar(active='view_booking',open='booking')}"></div>
			 <!-- end sidebar menu -->
			<!-- start page content -->
            <div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title">All Bookings</div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="">Booking</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li class="active">All Bookings</li>
                            </ol>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-md-12">
                            <div class="card card-box">
                                <div class="card-head">
                                    <header>All Bookings</header>
                                    <div class="tools">
                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
	                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
	                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                    </div>
                                </div>
                                <div class="card-body ">
                                    <div class="row p-b-20">
                                        <div class="col-md-6 col-sm-6 col-6">
                                            <div class="btn-group">
                                                <a th:href="@{/order/toaddOrder}" id="addRow" class="btn btn-info">
                                                    Add New <i class="fa fa-plus"></i>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="table-scrollable">
                                    <table class="table table-hover table-checkable order-column full-width" id="example4">
                                        <thead>
                                            <tr>
                                            	<th class="center"> 编号 </th>
                                                <th class="center"> 姓名 </th>
                                                <th class="center"> 手机 </th>
                                                <th class="center"> 邮箱 </th>
                                                <th class="center"> 入住时间 </th>
                                                <th class="center"> 退房时间 </th>
                                                <th class="center"> 客房编号 </th>
                                                <th class="center"> 客房类型 </th>
                                                <th class="center"> 支付状态 </th>
                                                <th class="center"> 操作 </th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr class="odd gradeX" th:each="order:${orders}">
                                                <td class="center" th:text="${order.getId()}"></td>
                                                <td class="center" th:text="${order.getName()}"></td>
                                                <td class="center" th:text="${order.getMobile()}"></td>
                                                <td class="center" th:text="${order.getMail()}"></td>
                                                <td class="center" th:text="${#dates.format(order.arrivedate,'yyyy-MM-dd')}"></td>
                                                <td class="center" th:text="${#dates.format(order.leavedate,'yyyy-MM-dd')}"></td>
                                                <td class="center" th:text="${order.getOrid()}"></td>
                                                <td class="center" th:text="${order.getRoom().getRoomtype()}"></td>
                                                <td class="center">
                                                    <span class="label label-sm label-success" th:text="${order.getPayment()}" th:if="${order.getPayment()=='已支付'}"></span>
                                                    <span class="label label-sm label-warning" th:text="${order.getPayment()}" th:if="${order.getPayment()=='未支付'}"></span>
                                                </td>
                                                <td class="center">
                                                    <button  class="btn btn-tbl-edit btn-xs showUpdateRoomOrder"
                                                        data-toggle="modal"
                                                        data-target="#changeOrderModal"
                                                        th:value="${order.getId()}">
                                                        <i class="fa fa-pencil"></i>
                                                    </button>
                                                    <button  id="deleteOrder" class="btn btn-tbl-delete btn-xs">
                                                        <i class="fa fa-trash-o "></i>
                                                    </button>
                                                </td>

                                            </tr>



										</tbody>
                                    </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page content -->
			<div th:replace="~{commons::settingtools}"></div>
        </div>
        <!-- end page container -->
        <!-- start footer -->
		<div th:replace="~{commons::footer}"></div>
        <!-- end footer -->

<!--        模态框-->
        <div class="modal fade" id="changeOrderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">修改订单信息</h4>
                    </div>
                    <div class="modal-body">
                        <form id="updateOrderForm">

                            <div class="form-group">
                                <label for="alterId" class=" control-label">订单编号</label>
                                <div>
                                    <input type="text" class="form-control" name="id" id="alterId" placeholder="订单编号" readonly>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="alterName" class="control-label">客户名称：</label>
                                <div>
                                    <input type="text" class="form-control" name="name" id="alterName"
                                           placeholder="客户名称">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="alterMobile" class="control-label">客户电话：</label>
                                <div>
                                    <input type="text" class="form-control" name="mobile" id="alterMobile"
                                           placeholder="客户电话">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="alterMail" class=" control-label">邮箱</label>
                                <div>
                                    <input type="text" class="form-control" name="mail" id="alterMail"
                                           placeholder="邮箱">
                                </div>
                            </div>



                            <div class = "form-group ">
                                <label for="alterArrive" class=" control-label">到达时间</label>
                                <div>
                                    <input type="text" class="form-control" name="arrivedate" id="alterArrive"
                                           placeholder="到达时间">
                                </div>
                            </div>

                            <div class = "form-group ">
                                <label for="alterleave" class=" control-label">退房时间</label>
                                <div>
                                    <input type="text" class="form-control" name="leavedate" id="alterleave"
                                           placeholder="退房时间">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="alterRid" class=" control-label">客房编号</label>
                                <div>
                                    <input type="text" class="form-control" name="orid" id="alterRid"
                                           placeholder="客房编号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="alterPayment" class=" control-label">支付状态</label>
                                <div>
                                    <input type="text" class="form-control" name="payment" id="alterPayment"
                                           placeholder="支付状态">
                                </div>
                            </div>


                            <div class="modal-footer">
                                <button  type="button" class="btn btn-default" data-dismiss="modal" id="closeModal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="updateOrder">
                                    提交更改
                                </button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->

            </div><!-- /.modal -->
        </div>

    </div>
    <!-- start js include path -->
    <script th:src="@{/assets/plugins/jquery/jquery.min.js}" ></script>
    <script th:src="@{/assets/plugins/popper/popper.min.js}" ></script>
    <script th:src="@{/assets/plugins/jquery-blockui/jquery.blockui.min.js}" ></script>
	<script th:src="@{/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
    <!-- bootstrap -->
    <script th:src="@{/assets/plugins/bootstrap/js/bootstrap.min.js}" ></script>
    <!-- Common js-->
	<script th:src="@{/assets/js/app.js}" ></script>
    <script th:src="@{/assets/js/layout.js}" ></script>
	<script th:src="@{/assets/js/theme-color.js}" ></script>
	<!-- data tables -->
    <script th:src="@{/assets/plugins/datatables/jquery.dataTables.min.js}" ></script>
 	<script th:src="@{/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.js}" ></script>
 	<script th:src="@{/assets/js/pages/table/table_data.js}" ></script>
	<!-- Material -->
	<script th:src="@{/assets/plugins/material/material.min.js}"></script>
	<!-- animation -->
	<script th:src="@{/assets/js/pages/ui/animations.js}" ></script>

	<script th:src="@{/assets/js/pages/extra_pages/all_order.js}" ></script>
    <!-- end js include path -->
</body>
</html>